<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环渲染</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!--
            v-for可以循环渲染出元素
            语法格式：v-for="(item,index) in items" :key="item.id"
            注意：index为索引，从0开始，一般不使用index，而是使用元素中的唯一键
            常用的格式是（不使用index）
            v-for="item in items" :key="item.id"    假设响应式的对象中循环出来的元素中有唯一键且键名是id，当然也可以是其它的

            当我们使用v-for对列表进行渲染后，实际上是实现了对这个数据对象的绑定。我们要吧调用下面的方法对列表数据进行更新操作
            push()          向列表尾部添加一个元素
            pop()           删除列表最后一个元素
            shift()         删除列表第一个元素
            unshift()       向列表开头添加一个元素
            splice()        向列表中添加、删除或替换元素
            sort()          对列表进行排序
            reverse()       列表元素进行反转
         -->
        <ul>
            <li v-for="(person,index) in persons" :key="person.id">{{index}} - {{person.name}}</li>
        </ul>
        <button @click="reverseList">逆序</button>
        <hr>
        <ol>
            <li v-for="person in handle(persons)" :key="person.id">{{person.name}}</li>
        </ol>
        <hr>
        <!--
            当我们一次要渲染多个元素时，可以使用template标签包裹起来，这样template标签中的内容会被渲染
        -->
        <template v-for="person in persons" :key="person.id">
            <span>id: {{person.id}}</span> --> <span>name: {{person.name}}</span>
            <br>
        </template>

        <!--
            如果我们渲染只是重复元素，不依赖具体的数据，可以像下面这样渲染
            v-for="i in 5"
            表示渲染5次，i的值分别是1，2，3，4，5
         -->
        <template v-for="i in 5">
            <span v-if="i===5">{{i}}</span>
            <span v-else>{{i}}、</span>
        </template>

        <!--
            注意：v-for与v-if同时在一个标签上存在时，由于v-if的优先级高于v-for，所以v-if不能依赖v-for遍历出来的数据
            （v-if判断的时候v-for还没有遍历出来数据这时用它的数据做判断不会有效果，且会报出警告！！！）
        -->
        <div v-for="i in 10" v-if="i!=5">
            重复次数:{{i}}
        </div>
    </div>

<script>
    // 从Vue中解构出需要的createApp和ref
    const {createApp,ref} = Vue

    let config = {
        setup() {
            // 数据
            const persons = ref([
                {id: 1, name: '刘备'},
                {id: 2, name: '关羽'},
                {id: 3, name: '张飞'},
                {id: 4, name: '赵云'},
                {id: 5, name: '黄忠'},
                {id: 6, name: '诸葛亮'},
                {id: 7, name: '马超'},
            ])

            // 方法
            const reverseList = () => {
                persons.value.reverse()
            }
            const handle = (l) => {
                return l.filter(obj => obj.name != "马超")
            }

            // 把数据和方法暴露给外部
            return {persons,reverseList,handle}
        }
    }
    const app = createApp(config)
    app.mount('#app')

</script>
</body>
</html>